<template>
    <div class="product">
        <div class="wrapper">
            <!-- 添加开始 -->
                <el-button size="mini" style="background-color:#2cb5ac" type="primary" @click="showHandler">添加</el-button>
            <!-- 添加结束-->
            <!-- 输入框开始 -->
                <div width="179px" height="20px">
                  <el-input size="small" v-model="list.username" placeholder="请输入名称"></el-input>
                </div>
            <!-- 输入框结束 -->
                <!-- 单选框开始 -->
                <div width="179px" height="28px">
                    <el-select size="small" v-model="value" clearable placeholder="请选择状态">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                    </el-select>  
                </div>
                <!-- 单选框结束 -->
               <!-- 查询按钮开始 -->
                <el-button size="mini" style="background-color:#2cb5ac" type="success" @click="xunHandler">查询</el-button>
               <!-- 查询按钮结束 -->
        </div>
        <!-- 表格开始 -->
      <div class="table">
                <el-table :data="customers" stripe style="width: 100%">
                    <el-table-column prop="id"       label="编号" width="180"  align="center"></el-table-column>
                    <el-table-column prop="username" label="用户名" width="180"  align="center"></el-table-column>
                    <el-table-column prop="realname" label="姓名"  align="center"></el-table-column>
                    <el-table-column prop="telephone" label="手机号"  align="center"></el-table-column>
                    <el-table-column prop="gender"   label="性别"  align="center"></el-table-column>
                    <el-table-column prop="status"   label="状态"  align="center"></el-table-column>
                    <el-table-column label="操作"  align="center">
                        <template slot-scope="scope">
                            <el-button @click="editHandler(scope.row)" size="mini" type="text">编辑</el-button>
                            <el-button @click="deleteHandler(scope.row.id)" size="mini" type="text">删除</el-button>
                            <el-button @click="skipHandler" size="mini" type="text" >详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
        </div>
        <!-- 表格结束 -->
         <!-- 分页开始 -->
       <div class="paginnation">
            <el-pagination
            layout="prev, pager, next"
            :page-size = 'list.pageSize'
            :total="total"
            @current-change='changeHandler'>
        </el-pagination>
    </div>
      <!-- 分页结束 -->
        <!-- 模态框开始 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <!-- 表单开始 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username" ><el-input v-model="ruleForm.username"></el-input></el-form-item>
        <el-form-item label="姓名" prop="realname"><el-input v-model="ruleForm.realname"></el-input></el-form-item>
        <el-form-item label="手机号" prop="telephone"><el-input v-model="ruleForm.telephone"></el-input></el-form-item>
        <el-form-item label="密码" prop="password"><el-input v-model="ruleForm.password"></el-input></el-form-item>
        <el-form-item label="性别" prop="gender"><el-radio-group v-model="ruleForm.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-form-item>
   <el-form-item label="状态" prop="status"><el-radio-group v-model="ruleForm.status">
            <el-radio label="正常"></el-radio>
            <el-radio label="禁用"></el-radio>
    </el-radio-group>
  </el-form-item>
      </el-form>
        <!-- 表单结束 -->
        <div slot="footer" class="dialog-footer">
          <el-button size="mini"  @click="dialogFormVisible = false">取 消</el-button>
          <el-button  size="mini" type="primary" style="background-color:#2cb5ac" @click="submitHandler">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 模态框结束 -->
    </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
    data(){
        return{
        options: [
            {
          value: '选项1',
          label: '禁用'
        }, 
        {
          value: '选项2',
          label: '正常'
        }, 
        ],
         value: '',
         list:{
             page:1,
             pageSize:10,
             ruleId:'6'
         },
          dialogFormVisible:false,
         ruleForm:{},
            rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          realname: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          telephone: [
            {  required: true, message: '请输入手机号', trigger: 'blur' }
          ],
          password: [
            {  required: true, message: '请输入密码', trigger: 'blur' }
          ],
        },
         //  添加顾客信息
        title:'添加顾客信息'
        }
    },
     computed:{
        ...mapState('customer',['customers','total'])
    },
    methods:{
        ...mapActions('customer',['findAllCustomer','saveCustomer','deleteCustomer']),
           changeHandler(page){
           this.list.page = page,
           this.findAllCustomer(this.list)
        },
        // 添加顾客信息
        showHandler(){
            this.dialogFormVisible = true
        },
          submitHandler(){
          console.log(this.ruleForm);
         this.saveCustomer(this.ruleForm).then(res=>{
          //  console.log(res);
          if(res.status === 200){
            this.dialogFormVisible = false
            this.findAllCustomer(this.list)
            this.$message({
              type:'success',
              message:res.message
            })
          }else{
            this.$message({
              type:'error',
              message:res.message
            })
          }
         })
        },
               // 编辑顾客信息
        editHandler(data){
        //  console.log(a);
        // 将当前行的内容赋值给ruleForm
         this.ruleForm = data,
         this.title = '编辑顾客信息'
        //  打开模态框
         this.dialogFormVisible = true
        },
        // 删除顾客信息
        deleteHandler(id){
        // alert(id)
        let params = {
          id
        }
        this.deleteCustomer(params).then(res=>{
          if(res.status === 200){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.findAllCustomer(this.list)
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
          }
        })
        },
        xunHandler(){
          this.findAllCustomer(this.list)
        },
        skipHandler(){
          this.$router.push({path:'/details'})
        }
},
created(){
    this.findAllCustomer(this.list)
}
}
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    height: 30px;
    display: flex;
    justify-content:space-between;
    text-align: center;
    font-size: 12px;
}
.table{
    margin-top: 20px;
}
.paginnation{
    float: right;
}
</style>